<template>
	<div class="home">
		<carousel :interval="4000" height="751px">
			<CarouselItem v-for="item in lunbolist" :key="item.id"><img :src="item.logoimage" style="width: 100%;height: 751px;" /></CarouselItem>
		</carousel>
		<div class="home-content">
			<div class="home-about-match">
				<div class="home-content-title">关于大赛</div>
				<div class="home-about-match-content">
					<img src="/static/images/home-math-logo.png" />
					<div>
						<div class="home-about-match-meta">{{ jianjieinfo.content }}</div>
						<div class="home-about-match-time">
							<div class="time-number-bg">
								<i class="time-number-left" :class="jianjieinfo.starttime | to_now_day | first_number"></i>
								<i class="time-number-right" :class="jianjieinfo.starttime | to_now_day | second_number"></i>
							</div>
							<div>
								距离大赛启幕还有
								<span>{{ jianjieinfo.starttime | to_now_day }}</span>
								天
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="home-news">
				<div class="home-content-title">最新资讯</div>
				<carousel :interval="4000" type="card" height="400px">
					<CarouselItem v-for="item in xinwenlist" :key="item.id"><img :src="item.logoimage" :title="item.title" /></CarouselItem>
				</carousel>
			</div>
			<div class="home-calender">
				<div class="home-content-title">大赛日程</div>
				<FullCalendar :options="calendarOptions" id="calendar" />
			</div>
			<div class="home-teams">
				<div class="home-content-title">团队介绍</div>
				<div class="home-teams-content">
					<div class="home-team-person" v-for="(person, ii) in tuanduijieshao" :key="ii">
						<img :src="person.logoimage" />
						<div class="home-team-person-name">{{ person.name }}</div>
						<div>{{ person.jobname }}</div>
						<div>{{ person.intro }}</div>
					</div>
				</div>
			</div>
			<div class="home-tv">
				<div class="home-content-title">大赛直播</div>

				<div class="home-tv-content" :style="'background-image: url(' + zhibodizhi.bannerimage + ')'"  @click="gozhibo()">
					<!-- <div class="home-tv-meta">
						2021中国（郑州）国际智能网联汽车大赛
						<br />
						暨世界车联网创新挑战赛
					</div>
					<button>观看视频</button> -->
				</div>
			</div>
			<div class="home-huoban">
				<div class="home-huoban-title">
					<img src="/static/images/logo1.png" />
					2021 合作伙伴 （部分）
				</div>
				<div class="home-huoban-list">
					<div class="home-parter-img-box" v-for="(item, index) in hezuohuoban" :key="index"><img :src="item.logoimage" /></div>
					<div class="home-parter-img-box home-parter-more">
						<img src="/static/images/more.png" />
						<div class="home-parter-more-meta">
							陆续更新中
							<br />
							排名不分前后
						</div>
					</div>
				</div>
			</div>
			<div class="home-huoban">
				<div class="home-huoban-title">
					<img src="/static/images/logo1.png" />
					2021 合作媒体 （部分）
				</div>
				<div class="home-huoban-list">
					<div class="home-parter-img-box" v-for="(item, index) in hezuomeiti" :key="index"><img :src="item.logoimage" /></div>
					<div class="home-parter-img-box home-parter-more">
						<img src="/static/images/more.png" />
						<div class="home-parter-more-meta">
							陆续更新中
							<br />
							排名不分前后
						</div>
					</div>
				</div>
			</div>
			<div class="home-huoban">
				<div class="home-huoban-title">
					<img src="/static/images/logo1.png" />
					2021 支持伙伴 （部分）
				</div>
				<div class="home-huoban-list">
					<div class="home-parter-img-box" v-for="(item, index) in zhichihuoban" :key="index"><img :src="item.logoimage" /></div>
					<div class="home-parter-img-box home-parter-more">
						<img src="/static/images/more.png" />
						<div class="home-parter-more-meta">
							陆续更新中
							<br />
							排名不分前后
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Carousel, CarouselItem } from 'element-ui';
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { format } from '@/filters'
import { cmsindex } from '../api/cms.js';

export default {
	name: 'Home',
	data() {
		return {
			hezuohuoban: {},
			hezuomeiti: {},
			jianjieinfo: {},
			lunbolist: {},
			richenglist: {},
			tuanduijieshao: {},
			xinwenlist: {},
			zhibodizhi: {},
			zhichihuoban: {},
			calendarOptions: {
				plugins: [dayGridPlugin, interactionPlugin],
				initialView: 'dayGridMonth',
				headerToolbar: {
					left: 'prev,next',
					center: 'title',
					right: ''
				},
				locale: 'zh-cn',
				initialDate: format(new Date(), 'YYYY-MM-DD'),
				firstDay: 0,
				events: [
					// {
					// 	title: '2021中国（郑州）国机智能网联汽车大赛启幕式',
					// 	start: '2021-07-06',
					// 	end: '2021-07-09',
					// 	color: '#00ffff',
					// 	textColor: '#000',
					// 	className: 'event-radius'
					// }
				],
				eventRender: function(event, element) {
					console.log(event, element);
				}
			}
		};
	},
	created() {
		//请求信息
		cmsindex()
			.then(res => {
				this.hezuohuoban = res.data.data.hezuohuoban;
				this.hezuomeiti = res.data.data.hezuomeiti;
				this.jianjieinfo = res.data.data.jianjieinfo;
				this.lunbolist = res.data.data.lunbolist;
				this.richenglist = res.data.data.richenglist;
				this.tuanduijieshao = res.data.data.tuanduijieshao;
				this.xinwenlist = res.data.data.xinwenlist;
				this.zhibodizhi = res.data.data.zhibodizhi;
				this.zhichihuoban = res.data.data.zhichihuoban;
				this.calendarOptions.events = res.data.data.richenglist.map(k => {
					return {
						title: k.title,
						start: k.strattime,
						end: k.endtime,
						color: '#f957fd',
						className: 'event-radius'
					}
				})
			})
			.catch(res => {
				console.log(res);
			});
	},
	components: {
		Carousel,
		CarouselItem,
		FullCalendar
	},
	methods:{
		gozhibo(){
			this.$router.push({path:'/live'})
		}
	},
	filters: {
		first_number (number) {
			var num = number > 99 ? 99 : number;
			var str;
			num = num < 10 ? '0' + num : num + ''
			str = num.slice(0, 1)
			return 'number' + str
		},
		second_number (number) {
			var num = number > 99 ? 99 : number;
			var str;
			num = num < 10 ? '0' + num : num + ''
			str = num.slice(1, 2)
			return 'number' + str
		},
	}
};
</script>
<style>
#calendar {
	border-radius: 25px;
	background-color: rgb(255, 255, 255);
	box-shadow: 2.5px 4.33px 25px 0px rgba(0, 0, 0, 0.2);
	width: 1244px;
	height: 725px;
	padding: 56px 40px;
}
.home-about-match-time .time-number-bg {
	background: url(/static/images/time_calender1.png) no-repeat;
	background-size: contain;
	width: 342px;
	height: 221px;
	padding-top: 0;
	position: relative;
}
.time-number-left, .time-number-right {
		background: url(/static/images/time_number.png) no-repeat;
    width: 90px;
    height: 130px;
    display: inline-block;
    background-position-y: -10px;
		position: absolute;
		top: 60px;
}
.time-number-left {
	left: 35px;
	
}
.number0 {
	background-position-x: -10px;
}
.number1 {
	background-position-x: -100px;
}
.number2 {
	background-position-x: -200px;
}
.number3 {
	background-position-x: -300px;
}
.number4 {
	background-position-x: -400px;
}
.number5 {
	background-position-x: -500px;
}
.number6 {
	background-position-x: -590px;
}
.number7 {
	background-position-x: -700px;
}
.number8 {
	background-position-x: -790px;
}
.number9 {
	background-position-x: -890px;
}
.time-number-right {
	left: 220px;
}
</style>
